<template>
  <main>
    <div class="container">
      <h1>欢迎使用LIST</h1>
      <todo-add :tid="todos.length" @add-todo="addTodo" />
      <todo-filter :selected="filter" @change-filter="changeFilter" />
      <todo-list :todos="todoLists" @change-state="changeTodoState" />
    </div>
  </main>
</template>

<script>
import TodoAdd from "./components/TodoAdd.vue";
import TodoFilter from "./components/TodoFilter.vue";
import TodoList from "./components/TodoList.vue";
export default {
  data() {
    return {
      todos: [],
      filter: "all"
    };
  },
  components: {
    TodoAdd,
    TodoFilter,
    TodoList
  },
  methods: {
    addTodo(todo) {
      this.todos.push(todo);
    },
    changeFilter(filter) {
      this.filter = filter;
    },
    changeTodoState(arg) {
      this.todos.forEach(todo => {
        if (todo.tid === arg.tid) {
          todo.completed = arg.completed;
        }
      });
    }
  },
  computed: {
    todoLists() {
      switch (this.filter) {
        case "all":
          return this.todos;
        case "completed":
          return this.todos.filter(todo => todo.completed);
        default:
          return this.todos.filter(todo => !todo.completed);
      }
    }
  }
};
</script>

<style lang="scss">
main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background-color: rgb(203, 210, 240);

  .container {
    width: 60%;
    max-width: 400px;
    padding: 48px 28px;
    border-radius: 24px;
    box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.15);
    background-color: rgb(245, 246, 252);

    h1 {
      margin: 14px 0 24px;
      font-size: 28px;
      color: #414873;
    }
  }
}
</style>
